<template>
  <grid-layout
    :layout="layout"
    :col-num="colNum"
    :row-height="30"
    :is-draggable="false"
    :is-resizable="false"
    :vertical-compact="true"
    :margin="[10, 10]"
    :use-css-transforms="true"
    >
    <!-- 操作按钮区域 -->
    <grid-item :x="0" :y="0" :w="12" :h="2" :static="true">
      <div class="action-bar">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button type="warning" @click="handleEdit" :disabled="single">编辑</el-button>
        <el-button type="success" @click="handlView" :disabled="single">查看</el-button>
        <el-button type="info" @click="handlePrint" :disabled="multiple">打印</el-button>
        <el-button type="danger" @click="handleDeleteSelected" :disabled="multiple">删除</el-button>
        <el-button @click="refreshData">刷新</el-button>
      </div>
    </grid-item>

    <!-- 数据表格区域 -->
    <grid-item :x="0" :y="1" :w="12" :h="18">
      <el-table
        :data="tableData"
        style="width: 100%; height: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="age" label="年龄" width="80" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="address" label="地址" />
        <!-- <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </grid-item>
  </grid-layout>
</template>

<script lang="ts" >
import { ref, reactive, defineComponent, computed, handleError } from 'vue'
import { GridLayout, GridItem } from 'vue-grid-layout'
import { ElButton, ElTable, ElTableColumn } from 'element-plus'
export default defineComponent({
    name: 'testApply',
    setup() {
      // 布局配置
      const layout = ref([
        { x: 0, y: 0, w: 12, h: 2, i: 'buttons' },
        { x: 0, y: 1, w: 12, h: 18, i: 'table' }
      ])

      // 表格数据
      interface TableItem {
        id: number;
        name: string;
        age: number;
        email: string;
        address: string;
      }
      const tableData = ref<TableItem[]>([
        {
          id: 1,
          name: '张三',
          age: 30,
          email: 'zhangsan@example.com',
          address: '北京市朝阳区'
        },
        {
          id: 2,
          name: '李四',
          age: 28,
          email: 'lisi@example.com',
          address: '上海市浦东新区'
        },
        // 更多测试数据...
      ])

      // 选中的行
      const selectedRows = ref<TableItem[]>([])

      // 操作方法
      const handleAdd = () => {
        const newItem = {
          id: tableData.value.length + 1,
          name: `新用户${tableData.value.length + 1}`,
          age: Math.floor(Math.random() * 30 + 20),
          email: `user${tableData.value.length + 1}@example.com`,
          address: '新地址'
        }
        tableData.value.push(newItem)
      }

      const handleDeleteSelected = () => {
        console.log('删除', selectedRows.value);
        const selectedIds = new Set(selectedRows.value.map(item => item.id))
        tableData.value = tableData.value.filter(item => !selectedIds.has(item.id))
      }

      const handleEdit = (row: TableItem) => {
        console.log('编辑行:', row)
        // 这里可以打开编辑对话框
      }

      const handlView = (row: TableItem) => {
        console.log('查看', row);
      }

      const handlePrint = () => {
        console.log('打印', selectedRows.value);
      }

      const refreshData = () => {
        // 模拟刷新数据
        console.log('刷新数据')
      }

      const handleSelectionChange = (selection: TableItem[]) => {
        console.log('选中的行:', selection)
        selectedRows.value = selection
      }

      const colNum = computed(() => {
        let colNum = 0;
        const data = tableData.value as TableItem[];
        if(data.length > 0){
          colNum = Object.keys(data[0]).length + 1;
        }
        return colNum;
      });

      const single = computed(() => {
        return selectedRows.value.length !== 1;
      });

      const multiple = computed(() => {
        return selectedRows.value.length === 0;
      });

      return { layout, tableData, selectedRows, handleAdd, handleDeleteSelected, handleEdit, handlView, handlePrint, handleSelectionChange, refreshData, colNum, single, multiple };
    }
});
</script>

<style scoped>
.action-bar {
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  /* margin-right: 10px; */
  display: flex;
  /* gap: 1px; */
  justify-content: flex-start;
}

.vue-grid-layout {
  background: #fff;
  height: calc(100vh - 20px);
}

.vue-grid-item:not(.vue-grid-placeholder) {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-table {
  height: 100%;
}
</style>